
const tBody = document.querySelector('tbody');

const oBtnAdd = document.querySelector('.add');

const oDivMask = document.querySelector('#mask');
let str = '';
let arr;
//查
panduan()
change();
add();

function panduan() {


    if (localStorage.article_list !== undefined) {
        // 如果有直接从localStorage获取
        arr = JSON.parse(localStorage.article_list);
        setPage();
    } else {
        // 没有调用Ajax请求生成
        getAjax();
    }
}
async function getAjax() {
    const p = JSON.parse(await myPromiseAjax('https://api.iynn.cn/mock', 'get', 't=2'));
    console.log(p);

    //添加 localStorage
    localStorage.article_list = JSON.stringify(p.data);

    // 获取转json的文件
    arr = JSON.parse(localStorage.article_list);

    setPage();
}

//获取localStorage数据动态加载到页面
function setPage() {
    // tBody.innerHTML = '';
    // console.log(arr.length);
    arr.forEach(function (item, key) {
        str += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.title}</td>
                    <td>${item.user}</td>
                    <td>${item.date}</td>
                    <td><button class= 'delete' name="dele" index=${key}>删除</button><button class = 'edit'  name="chang" index=${key}>编辑</button></td>
                </tr>
            `;
    })

    tBody.innerHTML = str;
}

function change() {

    $(tBody).click(function (e) {
        if ($(e.target).attr('name') === 'dele') {
            arr.splice($(e.target).attr('index'), 1);
            localStorage.article_list = JSON.stringify(arr);
            arr = JSON.parse(localStorage.article_list);
            str = ''
            setPage();
        } else if ($(e.target).attr('name') === 'chang') {
            $(oDivMask).css({ display: 'block' })
            $('[name="yeschange"]').attr('index', $(e.target).attr('index'));
            arr = JSON.parse(localStorage.article_list);
            const changeObj = arr[$(e.target).attr('index')];

            const changeTitle = oDivMask.querySelector('[name="title"]');
            const changeUser = oDivMask.querySelector('[name="user"]');
            const changeDate = oDivMask.querySelector('[name="date"]');
            $('.mask [name="title"]').val(changeObj.title);
            $('.mask [name="user"]').val(changeObj.user);
            $('.mask [name="date"]').val(changeObj.date);

            const obtnChange = document.querySelector('[name="yeschange"]');
            const obtnNoChange = document.querySelector('[name="nochange"]');

            $(obtnNoChange).click(function () {
                $(oDivMask).css({ display: 'none' })
            })

            $(obtnChange).click(function () {

                changeObj.title = changeTitle.value;
                changeObj.user = changeUser.value;
                changeObj.date = changeDate.value;

                localStorage.article_list = JSON.stringify(arr);

                str = '';
                setPage();
                $(oDivMask).css({ display: 'none' })
            })

        }
    })

}

//添加
function add() {

    const addTitle = oBtnAdd.querySelector('[name="title"]');
    const addUser = oBtnAdd.querySelector('[name="user"]');
    const addDate = oBtnAdd.querySelector('[name="date"]');
    $('.add>button').click(function () {

        let addtitle = addTitle.value;
        let adduser = addUser.value;
        let adddate = addDate.value;
        const obj = { id: Number(arr[arr.length - 1].id) + 1, title: addtitle, user: adduser, date: adddate };
        arr.push(obj);
        localStorage.article_list = JSON.stringify(arr);
        str = '';
        setPage();
    })

}